<template>
    <view class="page-activity-history">
		<u-sticky>
            <view class="search-sticky flex-between">
                <view class="flex-1">
				    <u-search placeholder="请输入关键字" :clearabled="true" v-model="searchForm.activitiesName" :show-action="false" @clear="getList('refresh')" @search="getList('refresh')"></u-search>
                </view>
                <view class="ml-2 city" @click="refSearchForm.init()">
                    <text class="ml-1">筛选</text>
                    <u-icon name="list-dot" size="24"></u-icon>
                </view>
			</view>
		</u-sticky>
        <view class="total">
            我们已经举办了<text class="num">{{ longList.total }}</text>场活动
        </view>
        <view class="p-4" v-if="longList.list.length == 0">
            <u-empty text="暂无内容" mode="list"></u-empty>
        </view>
		<view class="list" v-else>
            <view class="item" v-for="(item,index) in longList.list" :key="index" @click="proxy.$util.gotoPage('/packageB/activity/detail',{id:item.id})">
                <view class="hd">
                    <u-image width="100%" height="400rpx" :src="proxy.$util.getFullImage(item.photo)"></u-image>
                </view>
                <view class="bd">
                    <view class="title font-bold">{{ item.activitiesName }}</view>
                    <view class="c-grey9"><u-icon name="clock"></u-icon><text class="ml-2">时间：{{ dayjs(item.startTime).format('MM/DD HH:mm') }} {{ proxy.$util.getWeekName(dayjs(item.startTime).day()) }}</text></view>
                    <view class="c-grey9"><u-icon name="map"></u-icon><text class="ml-2">地点：{{ item.address  || '线上'  }}</text></view>
                </view>
            </view>
        </view>
        <search-form ref="refSearchForm" @confirm="filterList" />
    </view>
</template>
<script setup lang="ts">
import SearchForm from './components/searchForm.vue';
import dayjs from 'dayjs';
import {onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { useLonglist } from '@/static/fn/longList';
let refSearchForm = ref();
const initObj = {
	listApi:'/admin/activities/xcxPage',
}
let { searchForm, longList, getList} = useLonglist(initObj);
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const filterList = (params) => {
    searchForm.activityType = params.activityType;
    searchForm.activitiesMethod = params.activitiesMethod;
    searchForm.guildId = params.guildId;
    searchForm.status =  4; // 0: 草稿, 1: 待审核, 2: 审核通过, 3: 审核不通过
    getList('refresh');
}
onPullDownRefresh(() => {
	getList('refresh');
	setTimeout( () => {
		uni.stopPullDownRefresh();
	}, 1000);
});
onReachBottom(() =>{
	getList();
});
onShow(() => {
    searchForm.status = 4;
	getList('refresh');
})
</script>